<template>
  <div>
    <p>
      Vue 不能检测以下数组的变动： <br />
      1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
      <br />
      2.当你修改数组的长度时，例如：vm.items.length = newLength
    </p>
    <p>
        如果数组中的元素是基本数据类型，那么我们直接修改这个元素，这个数组并不会响应式的更改，页面的数据也就不会变动 <br>
        但如果数组中是一个对象，或者更加深层次的对象嵌套，我们修改对象中的属性值，就是响应式的，但是不能给对象新增属性，<br>
        Vue响应式原理中已经表明了数据想成为响应式的，必须提前在data中声明，新加一个属性，肯定不行<br>
    </p>
    <p>
        这儿发现了一个问题，当我直接修改“呵呵”的时候，页面不会响应式改变，然后我有修改list的第一条数据，因为修改第一条数据是响应式更改 <br>
        会发现第一条数据变化了， “呵呵”也变了，咋个就是响应了呢？我也不知道
    </p>
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="handlebtn(index)">
        <span v-if="index < (list.length - 1)">
            {{ item.name }}--{{ item.obj.age }}
        </span>
        <span v-else>{{item}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { name: "张三", obj: { age: 18 } },
        { name: "李四", obj: { age: 20 } },
        "呵呵",
      ],
    };
  },
  methods: {
    handlebtn(index) {
      if (index === this.list.length - 1) {
          this.list[index] = 'wporr'
      } else {
        this.list[index].name = "哈哈";
        this.list[index].obj = { age: 22 }; //直接替换对象中某个属性值，不管是基本数据类型的替换，还是另外一个数组，都是响应式的
      }
      console.log(this.list)
    },
  },
};
</script>